<template>
	<div>
		<div class="container">
			<div class="toolbar">
				<a-form ref="searchRef" :model="searchState" @finish="current = 1; loading = true; initData()">
					<a-row :gutter="20">
						<a-col :span="8">
							<a-form-item label="城市公司/专业公司">
								<a-select v-model:value="searchState.company_id" :show-search="true" placeholder="请选择城市公司/专业公司" :options="companyOptions" option-filter-prop="label" allow-clear></a-select>
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-form-item label="项目名称">
								<a-input v-model:value="searchState.name" placeholder="请输入项目名称" allow-clear></a-input>
							</a-form-item>
						</a-col>
					</a-row>
					<a-row :gutter="20">
						<a-col :span="8">
							<a-form-item>
								<a-space>
									<a-button type="primary" html-type="submit">
										<search-outlined />搜索
									</a-button>
								</a-space>
							</a-form-item>
						</a-col>
						<a-col style="padding: 10px 0;" :span="8"></a-col>
					</a-row>
				</a-form>
			</div>

			<div class="mt-2">
				<!--
				v-if="!loading"使得:default-expand-all-rows="true"生效
				-->
				<a-table v-if="!loading" :columns="columns" :scroll="tableScroll" row-key="id" children-column-name="children" :default-expand-all-rows="false" :data-source="planSource" :pagination="pagination" :loading="loading" @change="initData">
					<template #bodyCell="{ column, record }">
						<template v-if="column.key === 'operation'">
							<a-space>
								<!-- <a-button v-if="record.parent_id === 0" type="link" @click="showPlan(record)">
									<diff-outlined />工号计划汇总
								</a-button>

								<a-button v-if="record.parent_id === 0" type="link" @click="router.push(`/plan/create?parent_id=${record.id}`)">
									<plus-outlined />更新计划
								</a-button>-->
								<!-- <a-button v-permission="19" type="link" @click="showPlan(record)">查看</a-button> -->

								<a-button v-permission="21" type="link" @click="editPlan(record)">
									<edit-outlined />修改
								</a-button>
								<!-- <a-button v-permission="100" type="link" style="color:#ff7875" @click="deletePlan(record.id)">
									<delete-outlined />删除
								</a-button> -->

								<!-- <a-button v-if="record.parent_id === 0" type="link" @click="router.push(`/plan/summary/${record.id}`)">
									<partition-outlined :rotate="180" />总控计划汇总
								</a-button>-->
							</a-space>
						</template>
					</template>
				</a-table>
			</div>
		</div>
		<a-modal v-model:visible="visible" :width="400" title="编辑" @ok="fillIn">
			<a-form ref="formFillRef" :model="fillInData">
				<a-row>
					<a-col :span="24">
						<a-form-item label="项目名称" name="name">
							<a-input v-model:value="fillInData.name" disabled />
						</a-form-item>
					</a-col>
					<a-col :span="24">
						<a-form-item label="项目负责人" name="leader">
							<a-input v-model:value="fillInData.leader" placeholder="请输入项目负责人" />
						</a-form-item>
					</a-col>
					<a-col :span="24">
						<a-form-item label="电话" name="phone">
							<a-input v-model:value="fillInData.phone" placeholder="请输入电话" />
						</a-form-item>
					</a-col>
					<a-col :span="24">
						<a-form-item label="区域" name="region">
							<a-cascader v-model:value="fillInData.region" :check-strictly="true" :options="regionOptions" :load-data="loadRegionData" placeholder="请选择区域" change-on-select />
						</a-form-item>
					</a-col>
					<a-col :span="24">
						<a-form-item label="地址" name="address">
							<a-input v-model:value="fillInData.address" placeholder="请输入地址" />
						</a-form-item>
					</a-col>
				</a-row>
		
			</a-form>
		</a-modal>
	</div>
</template>

<script setup>
import { reactive, ref, computed, getCurrentInstance } from "vue";
import { useRouter, useRoute } from "vue-router";

const { proxy } = getCurrentInstance();

import { SearchOutlined, EditOutlined } from "@ant-design/icons-vue";

import { post } from "../utils";
const route = useRoute();
const router = useRouter()
const query = route.query;
import { usePagination } from "vue-request";
const searchRef = ref();
const searchState = reactive({});
const companyOptions = ref([]);
const visible = ref(false);
const fillInData = ref({});
const formFillRef = ref();
const getRegion = async parentId => {
	return await post("region/cascader", { parent_id: parentId });
};

const regionOptions = ref([]);
getRegion(0).then(data => {
	regionOptions.value = data;
});

const loadRegionData = options => {
	const option = options[options.length - 1];
	option.loading = true;

	return getRegion(option.value).then(data => {
		option.loading = false;
		option.children = data;

		regionOptions.value = [...regionOptions.value];
	});
};
post("department/projects?type=2", {
	parent_ids: JSON.stringify([78, 24])
}).then(({ data }) => {
	companyOptions.value = data.map(d => {
		return {
			value: d.id,
			label: d.name
		};
	});
});
const userOptions = ref([]);
post("filter/user").then(data => {
	userOptions.value = data.map(d => {
		return {
			value: d.id,
			label: d.fullname || d.username
		};
	});
});
const columns = [
	{
		title: "序号",
		dataIndex: "id",
		key: "id",
		width: 50,
		align: "left",
		fixed: "left"
	},
	{
		title: "区域/专业公司",
		dataIndex: "company_name",
		sorter: false,
		width: 120,
		ellipsis: true,
		fixed: "left",
	},
	{
		title: "项目名称",
		dataIndex: "name",
		sorter: false,
		width: 120,
		ellipsis: true,
		fixed: "left",
		customRender: ({ text, record, index, column }) => {
			return text.name;
		}
	},
	{
		title: "项目负责人",
		dataIndex: "leader",
		sorter: false,
		width: 80,
		ellipsis: true,
		fixed: "left"
	},
	{
		title: "电话",
		dataIndex: "phone",
		sorter: false,
		width: 80,
		ellipsis: true,
		fixed: "left"
	},
	{
		title: "区域",
		dataIndex: "region_text",
		sorter: false,
		width: 150,
		ellipsis: true,
		fixed: "left"
	},
	{
		title: "地址",
		dataIndex: "address",
		sorter: false,
		width: 200,
		ellipsis: true,
		fixed: "left"
	},
	{
		title: "操作",
		key: "operation",
		sorter: false,
		fixed: "right",
		width: 150,
		align: "center"
	}
];
const tableScroll = computed(() => ({
	x: document.documentElement.clientWidth - 650
}));

const changeflowStatus = e => {
	if (e && searchState) {
		searchState.ids = e.ids;
		if (searchState.ids) {
			initData();
		}
	}
};

const { data, loading, run, current, pageSize, total } = usePagination(
	async params => {
		return post("department/projects?type=3", { 
			...params, ...searchState,
		});
	},
	{
		defaultParams: [
			{
				page_size: 10
			}
		],
		pagination: {
			currentKey: "page",
			pageSizeKey: "page_size",
			totalKey: "total"
		}
	}
);

const planSource = computed(() =>
	(data.value?.data || []).map(d => {
		return d;
	})
);

const pagination = computed(() => ({
	total: total.value,
	current: current.value,
	pageSize: pageSize.value
}));

const initData = (pag, filters, sorter) => {
	pag = Object.assign(
		{
			current: current.value,
			pageSize: pageSize.value
		},
		pag || {}
	);
	filters = { ...filters, ...searchState };
	const query = {};
	if (pag?.pageSize) {
		query['page_size'] = pag?.pageSize;
	}
	if (pag?.current) {
		query['page'] = pag?.current;
	}
	router.replace({ query: {
		...query,
		...filters
	}})
	run({
		page_size: pag?.pageSize,
		page: pag?.current,
		sort_field: sorter?.field,
		sort_order: sorter?.order,
		...filters
	});
};
if (query) {
	if (query.company_id) searchState.company_id = parseInt(query.company_id);
	if (query.project_id) searchState.project_id = parseInt(query.project_id);
	if (query.opr_id) searchState.opr_id = parseInt(query.opr_id);
	if (query.name) searchState.name = query.name;
	if (query.name) searchState.name = query.name;
	const pag = {};
	if (query.page) {
		pag['current'] = parseInt(query.page);
	}
	if (query.pageSize) {
		pag['pageSize'] = parseInt(query.page_size);
	}
	initData(pag);
}
// 编辑
const editPlan = async (row) => {
	fillInData.value = row;
	const region = row.region;
	//处理懒加载数据
	try {
		if (region[1]) regionOptions.value.find(d => d.value === parseInt(region[0])).children = await getRegion(region[0]);
		if (region[2]) regionOptions.value.find(d => d.value === parseInt(region[0])).children.find(d => d.value === parseInt(region[1])).children = await getRegion(region[1]);
	} catch (err) {
		//proxy.$message.error(err);
	}
	visible.value = true;
    

};
// 提交编辑信息
const fillIn = () => {
	const { id, company_id, parent_id, leader, phone, region, address } = fillInData.value;
	const params = {
		id,
		company_id,
		parent_id,
		leader, 
		phone, 
		region, 
		address
	}
	if (params.region) params.region = JSON.stringify(params.region);
	formFillRef.value.validate().then(() => {
		post("/department/save", params).then((res) => {
			proxy.$message.success("修改成功");
			initData()
			visible.value = false
		})
	});
};
const lookPlan = ({ id, project, code }) => {
	router.push(`plan/detail/${id}?&code=${code}`);
};
// const showPlan = ({ id }) => {
// 	router.push(`plan/info/${id}`);
// };
// 查看详情
const showPlan = ({ id, code }) => {
	// :href="`/#/plan/detail/${record.id}?&code=${record.code}`"
	router.push(`plan/detail/${id}?&code=${code}`);
};
const deletePlan = id => {
	proxy.$confirm({
		title: "确认提示",
		content: `确定要删除${typeof id === "number" ? "当前" : "选中"}的计划吗？`,
		okText: "确认",
		cancelText: "取消",
		onOk() {
			post("plan/delete", { id })
				.then(() => {
					proxy.$message.success("计划删除成功");
					initData();
				})
				.catch(err => {
					proxy.$message.error(err);
				});
		}
	});
};
</script>
<style scoped lang="scss">
.container {
	background: #fff;
	padding: 12px;
}
</style>
